<template>
  <view class="room-preview">
    <!-- 顶部图片轮播 -->
    <u-swiper :list="mainImages" height="220" border-radius="0" indicator indicator-active-color="#ff6b35" />
    <!-- tab栏 -->
    <u-tabs :list="tabList" :current="activeTab" @change="onTabChange" lineColor="#ff6b35" lineWidth="40" :scrollable="false" />
    <!-- 内容区 -->
    <scroll-view scroll-y :scroll-into-view="scrollTo" class="tab-content-scroll" style="height:calc(100vh - 270rpx);">
      <!-- 房源 -->
      <view :id="'section-0'">
        <view class="room-title-box">
          <view class="room-title">{{ roomData.title }}</view>
          <view class="room-tags">
            <u-tag v-for="(tag, i) in roomData.tags" :key="i" :text="tag" type="primary" size="mini" class="tag" />
          </view>
        </view>
        <view class="room-score-box">
          <u-rate :value="roomData.score" readonly size="18" color="#ff6b35" />
          <text class="score-text">{{ roomData.score }}分 · {{ roomData.scoreCount }}条点评</text>
          <view class="room-address">{{ roomData.address }}</view>
          <view class="room-distance">{{ roomData.distance }}</view>
        </view>
        <u-divider text="推荐理由" />
        <view class="recommend-reason">{{ roomData.recommendReason }}</view>
        <view class="feature-tags">
          <u-tag v-for="(tag, i) in roomData.featureTags" :key="i" :text="tag" type="success" size="mini" class="tag" />
        </view>
      </view>
      <!-- 点评 -->
      <view :id="'section-1'">
        <u-divider text="点评" />
        <view v-if="roomData.reviews && roomData.reviews.length">
          <view v-for="(review, i) in roomData.reviews" :key="i" class="review-item">
            <view class="review-header">
              <u-avatar :src="review.avatar && review.avatar[0] ? review.avatar[0].url : ''" size="32" />
              <view class="review-user">{{ review.username }}</view>
              <view class="review-date">{{ review.date }}</view>
            </view>
            <view class="review-content">{{ review.content }}</view>
            <view class="review-images" v-if="review.images && review.images.length">
              <u-image v-for="(img, j) in review.images" :key="j" :src="img.url" width="80" height="60" border-radius="6" mode="aspectFill" style="margin-right:8rpx;" />
            </view>
          </view>
        </view>
        <view v-else class="empty-text">暂无点评</view>
      </view>
      <!-- 设施 -->
      <view :id="'section-2'">
        <u-divider text="房间设施" />
        <u-grid :col="4" :border="false">
          <u-grid-item v-for="(item, i) in allFacilities" :key="i">
            <u-icon :name="item.icon" :color="item.available ? '#67c23a' : '#ccc'" size="28" />
            <text class="facility-name">{{ item.name }}</text>
          </u-grid-item>
        </u-grid>
      </view>
      <!-- 房东 -->
      <view :id="'section-3'">
        <u-divider text="房东信息" />
        <u-cell-group>
          <u-cell :title="roomData.landlord.name" :label="roomData.landlord.description">
            <u-avatar slot="icon" :src="roomData.landlord.avatar && roomData.landlord.avatar[0] ? roomData.landlord.avatar[0].url : ''" size="40" />
          </u-cell>
        </u-cell-group>
      </view>
      <!-- 须知 -->
      <view :id="'section-4'">
        <u-divider text="入住须知" />
        <view class="notice-list">
          <view v-for="(rule, i) in roomData.noticeRules" :key="i" class="notice-item">
            <text class="notice-label">{{ rule.name }}：</text>
            <text class="notice-value">{{ rule.content }}</text>
          </view>
        </view>
        <u-divider text="价格说明" />
        <view class="price-notice">{{ roomData.priceNotice }}</view>
        <u-divider text="位置" />
        <u-image :src="mapImage" width="100%" height="120" border-radius="8" mode="aspectFill" />
        <view class="map-address">{{ roomData.location.address }}</view>
      </view>
    </scroll-view>
    <!-- 预订按钮 -->
    <view class="bottom-bar">
      <view class="price">¥{{ roomData.price }} <text class="price-desc">/晚</text></view>
      <u-button type="primary" shape="circle" class="book-btn">立即预订</u-button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RoomPreview',
  props: {
    roomData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tabList: [
        { name: '房源' },
        { name: '点评' },
        { name: '设施' },
        { name: '房东' },
        { name: '须知' }
      ],
      activeTab: 0,
      scrollTo: ''
    }
  },
  computed: {
    mainImages() {
      return (this.roomData.mainImages || []).map(img => img.url || img);
    },
    mapImage() {
      const arr = this.roomData.location && this.roomData.location.mapImage;
      return arr && arr.length ? (arr[0].url || arr[0]) : '';
    },
    allFacilities() {
      // 合并所有设施
      const arr = [];
      (this.roomData.serviceFacilities || []).forEach(f => arr.push({ ...f, icon: 'home' }));
      (this.roomData.basicFacilities || []).forEach(f => arr.push({ ...f, icon: 'grid' }));
      (this.roomData.bathroomFacilities || []).forEach(f => arr.push({ ...f, icon: 'list-dot' }));
      return arr;
    }
  },
  methods: {
    onTabChange(e) {
      this.activeTab = e.index;
      this.scrollTo = `section-${e.index}`;
      // 兼容H5/小程序滚动到锚点
      setTimeout(() => {
        this.scrollTo = '';
      }, 400);
    }
  }
}
</script>

<style scoped>
.room-preview {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 80rpx;
}
.tab-content-scroll {
  height: calc(100vh - 270rpx);
}
.room-title-box {
  padding: 24rpx 24rpx 0 24rpx;
}
.room-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 12rpx;
}
.room-tags, .feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 8rpx;
}
.tag {
  margin-right: 8rpx;
}
.room-score-box {
  padding: 0 24rpx 16rpx 24rpx;
  color: #666;
}
.score-text {
  margin-left: 12rpx;
  color: #ff6b35;
}
.room-address, .room-distance {
  font-size: 24rpx;
  color: #888;
  margin-top: 4rpx;
}
.recommend-reason {
  padding: 0 24rpx 16rpx 24rpx;
  color: #333;
  font-size: 28rpx;
}
.facility-name {
  font-size: 22rpx;
  color: #666;
  margin-top: 6rpx;
}
.map-address {
  padding: 12rpx 24rpx;
  color: #666;
  font-size: 26rpx;
}
.notice-list {
  padding: 0 24rpx;
}
.notice-item {
  font-size: 26rpx;
  color: #444;
  margin-bottom: 8rpx;
}
.notice-label {
  color: #888;
}
.notice-value {
  color: #333;
}
.price-notice {
  padding: 0 24rpx 16rpx 24rpx;
  color: #888;
  font-size: 24rpx;
}
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 24rpx 24rpx 24rpx;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
  z-index: 99;
}
.price {
  font-size: 36rpx;
  color: #ff6b35;
  font-weight: bold;
}
.price-desc {
  font-size: 22rpx;
  color: #888;
  margin-left: 4rpx;
}
.book-btn {
  width: 220rpx;
  font-size: 30rpx;
}
.empty-text {
  color: #bbb;
  text-align: center;
  padding: 32rpx 0;
  font-size: 28rpx;
}
.review-item {
  background: #fff;
  border-radius: 12rpx;
  margin: 16rpx 24rpx;
  padding: 18rpx 16rpx;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.review-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 8rpx;
}
.review-user {
  font-weight: bold;
  color: #333;
  font-size: 26rpx;
}
.review-date {
  color: #aaa;
  font-size: 22rpx;
  margin-left: auto;
}
.review-content {
  color: #444;
  font-size: 26rpx;
  margin-bottom: 8rpx;
}
.review-images {
  display: flex;
  gap: 8rpx;
}
</style> 